<template>
  <div class="cont">
    <div class="btn-panel">
      <el-button size="small" :plain="true">按销量排序</el-button>
      <el-button size="small" :plain="true">按售价排序</el-button>
      <el-button size="small" :plain="true">按库存排序</el-button>
      <el-button size="small" class="btn-addpro" type="primary" @click="addGoods" :plain="true">添加商品</el-button>
    </div>
    <div class="list">
      <el-tabs v-model="tabActiveName" @tab-click="tabClick">
        <el-tab-pane label="全部商品" name="0"></el-tab-pane>
        <el-tab-pane label="出售中" name="1"></el-tab-pane>
        <el-tab-pane label="已售完" name="2"></el-tab-pane>
        <el-tab-pane label="已下架" name="3"></el-tab-pane>
      </el-tabs>
      <div class="search">
        <div class="s-label">
          <span>商品名称:</span>
        </div>
        <div class="s-input">
          <el-input v-model="productName" placeholder="请输入内容" size="small" @change="queryGoods"></el-input>
        </div>
        <div class="s-btn">
          <el-button size="small" @click="queryGoods">查询</el-button>
          <el-button size="small" @click="clearQuery">清空</el-button>
        </div>
      </div>
      <div class="d-table">
        <el-table :data="goodsList" style="width: 100%" stripe>
          <el-table-column type="expand">
            <template #default="props">
              <el-table :data="JSON.parse(JSON.stringify(props.row.product))" style="width:100%" stripe>
                <el-table-column prop="id" label="id" width="60"></el-table-column>
                <el-table-column prop="goods_sn" label="商品SKU" width="140">
                  <template #default="scope">
                    <el-input @blur="checkSkuOnly(scope.$index,scope.row)" size="mini" 
                      v-model="scope.row.goods_sn" placeholder="商品SKU"
                    ></el-input>
                  </template>
                </el-table-column>

                <el-table-column prop="goods_aka" label="快递单上的简称" width="160">
                  <template #default="scope">
                    <el-input size="mini" v-model="scope.row.goods_name" palceholder="简称"></el-input>
                  </template>
                </el-table-column>
                
                <el-table-column prop="value" label="型号/规格" width="140">
                  <template #default="scope">
                    <el-input size="mini" v-model="scope.row.spec_value" placeholder="如1斤/条"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="cost" label="成本(元)" width="90">
                    <template #default="scope">
                        <el-input size="mini" v-model="scope.row.cost" placeholder="成本"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="retail_price" label="零售(元)" width="90">
                    <template #default="scope">
                        <el-input size="mini" v-model="scope.row.retail_price"
                                  placeholder="零售"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_weight" label="重量(KG)" width="90">
                    <template #default="scope">
                        <el-input size="mini" v-model="scope.row.goods_weight"
                                  placeholder="重量"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_number" label="库存" width="90">
                    <template #default="scope">
                        <el-input size="mini" v-model="scope.row.goods_number"
                                  placeholder="库存"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template #default="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-check" circle
                                @click="specSave(scope.$index, scope.row)">
                        </el-button>
                    </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="120"></el-table-column>
          <el-table-column label="商品图片" width="80">
              <template #default="scope">
                  <img :src="scope.row.list_pic_url" alt="" style="width: 40px;height: 40px">
              </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column label="排序" width="140" sortable>
              <template #default="scope">
                  <el-input-number class="sort-width" size="mini" :min="1" :max="100" controls-position="right" v-model="scope.row.sort_order" placeholder="排序" @blur="submitSort(scope.$index, scope.row)" @change="submitSort(scope.$index, scope.row)"></el-input-number>
              </template>
          </el-table-column>
          <el-table-column prop="sell_volume" label="销量" width="80" sortable></el-table-column>
          <el-table-column prop="goods_number" label="库存" width="80" sortable>
          </el-table-column>
          
          <el-table-column label="首页显示" width="80">
              <template #default="scope">
                  <el-switch
                        v-model="scope.row.is_index"
                        active-text=""
                        inactive-text=""
                        :active-value="1"
                        :inactive-value="0"
                        @change='changeShowStatus($event,scope.row)'>
                  </el-switch>
              </template>
          </el-table-column>
          <el-table-column label="上架" width="80">
              <template #default="scope">
                  <el-switch
                          v-model="scope.row.is_on_sale"
                          active-text=""
                          inactive-text=""
                          :active-value="1"
                          :inactive-value="0"
                          @change='changeStatus($event,scope.row)'>
                  </el-switch>
              </template>
          </el-table-column>
          <el-table-column label="操作">
              <template #default="scope">
                  <el-button size="small" @click="handleRowEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="small" plain type="danger" @click="handleRowDelete(scope.$index, scope.row)">删除
                  </el-button>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="size"
            layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    
  </div>
</template>
<script>
import { getGoodsList, updateGoods,updateProduct }  from '@/api/goods.js'
import { checkSku }  from '@/api/product.js'

export default {
  name:'product',
  data(){
    return {
      tabActiveName:'0',
      productName:'', // 商品名称
      goodsList:[], // 商品列表
      currentPage:1,
      size:10,
    }
  },
  created(){
    this.queryGoods()
  },
  methods:{
    addGoods(){
      this.$router.push('/product/addGoods')
    },
    async queryGoods(){
      this.tabActiveName = '0'
      let goodsRes = await getGoodsList({
        page:this.currentPage,
        size:this.size,
        name:this.productName
      })
      console.log('goodsRes.data:',goodsRes.data)
      if(goodsRes.code === 0){
        this.goodsList = goodsRes.data
      }else{
        this.$message({
          type:'error',
          message:'请求错误,请稍后重试'
        })
      }
    },
    async changeShowStatus(value,row){

      // console.log('changeShowStatus value:',value)
      // console.log('row.is_index:',row.is_index)
      let res = await updateGoods({
        id:row.id,
        is_index:value
      })
      if(res.code === 0){
        this.$message({
          type:'success',
          message:'更新成功'
        })
      }else {
        this.$message({
          type:'error',
          message:'更新失败'
        })
      }
    },
    async changeStatus(value,row){
      
      let res = await updateGoods({
        id:row.id,
        is_on_sale:value
      })
      if(res.code === 0){
        this.$message({
          type:'success',
          message:'更新成功'
        })
      }else {
        this.$message({
          type:'error',
          message:'更新失败'
        })
      }
    },
    async tabClick(value){
      let query = {}
      switch(this.tabActiveName){
        case '0':
          // 全部
          query = {name:''}
          break
        case '1':
          // 出售中
          query = {is_on_sale:1}
          break
        case '2':
          // 已售完
          query = {goods_number:0}
          break
        case '3':
          // 已下架
          query = {is_on_sale:0}
          break
        default:
          query = {name:''}
      }
      let goodsRes = await getGoodsList(query)
      console.log('goodsRes.data:',goodsRes.data)
      if(goodsRes.code === 0){
        this.goodsList = goodsRes.data
      }else{
        this.$message({
          type:'error',
          message:'请求错误,请稍后重试'
        })
      }
      console.log('tabClick value:',value)
    },
    handleRowEdit(index,row){
      this.$router.push('/product/addGoods?id='+row.id)
    },
    handleRowDelete(index,row){

    },
    handlePageChange(){

    },
    async checkSkuOnly(index,row){
      // 检查sku是否唯一
      if (row.goods_sn === '') {
        this.$message({
          type: 'error',
          message: 'SKU不能为空'
        })
        return false;
      }

      let res = await checkSku({
        goods_sn:row.goods_sn
      })
      if(res.code === 0){
        console.log('res:',res)
        // 根据sku查询商品
        if(res.data.length > 0){
          this.$message({
            type:'error',
            message:'该sku已存在'
          })
        }else{
          this.$message({
            type:'success',
            message:'该sku可用'
          })
        }
      }else{
        this.$message({
          type:'error',
          message:'查询sku失败'
        })
      }
    },
    async specSave(index,row){
      //  保存型号
      let res = await updateProduct(row)
      if(res.code === 0){
        this.$message({
          type:'success',
          message:'更新成功'
        })
      }else {
        this.$message({
          type:'error',
          message:'更新失败'
        })
      }
    },
    async submitSort(index,row){
      let res = await updateGoods({
        id:row.id,
        sort_order:row.sort_order
      })
      if(res.code === 0){
        this.$message({
          type:'success',
          message:'更新成功'
        })
      }else {
        this.$message({
          type:'error',
          message:'更新失败'
        })
      }
    },
    async clearQuery(){
      this.productName = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-panel{
  padding:20px;
  text-align: left;
  .btn-addpro{
    float: right;
  }
}
.list{
  
}
.search{
  display: flex;
  align-items: center;
  height: 40px;
  .s-label{
    
  }
  .s-input{
    width: 200px;
    margin-left:20px;
  }
  .s-btn{
    margin-left: 20px;
  }
}
</style>

